<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
<div id="app">
    <div style="margin-top:5px;margin-right:15px;padding: 12px;margin-bottom: 5px;">
        <span>
            <el-input
                placeholder="请输入内容"
                v-model="searchName"
                clearable
                style="width: 200px;height: 60px">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </span>
    </div>
    <el-button @click="clear">增加商品</el-button>
        <el-table
                :data="tableData"
                style="width: 100%"
        >
            <el-table-column
                    label="商品编号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品名称"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品价格"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pprice }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品分类"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.penterprise}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="添加时间"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.paddtime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="申请状态"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.astatus }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品状态"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pstatus }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产地"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.plocal }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="保质期"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pshelflife }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="材质"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pmaterial }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="品牌"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pbrand }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品质量"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pquality }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="warning" icon="el-icon-s-operation" @click="open(scope.$index, scope.row)"></el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


    <el-dialog title="保存商品" :visible.sync="dialogFormVisible">
        <el-form :model="commodity">
            <el-form-item label="商品编号" :label-width="formLabelWidth">
                <el-input v-model="commodity.pnumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="commodity.pname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" :label-width="formLabelWidth">
                <el-input v-model="commodity.pimg" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="commodity.pprice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类" :label-width="formLabelWidth">
                <el-input v-model="commodity.penterprise" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="添加时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="commodity.paddtime"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="申请状态" :label-width="formLabelWidth">
                <el-input v-model="commodity.astatus" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品状态" :label-width="formLabelWidth">
                <el-input v-model="commodity.pstatus" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司id" :label-width="formLabelWidth">
                <el-input v-model="commodity.companyId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产地" :label-width="formLabelWidth">
                <el-input v-model="commodity.plocal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="保质期" :label-width="formLabelWidth">
                <el-input v-model="commodity.pshelflife" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="材质" :label-width="formLabelWidth">
                <el-input v-model="commodity.pmaterial" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="品牌" :label-width="formLabelWidth">
                <el-input v-model="commodity.pbrand" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品质量" :label-width="formLabelWidth">
                <el-input v-model="commodity.pquality" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>

    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[5, 10, 25, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                formLabelWidth:"120px",
                dialogFormVisible:false,
                tableData:[],
                total:0,
                current:0,
                pageSize:5,
                fileList:[],
                searchName:"",
                commodity:{id:"",pnumber:"",pname:"",pimg:"",pprice:"",penterprise:"",paddtime:"",astatus:"",pstatus:"",companyId:"",plocal:"",pshelflife:"",pmaterial:"",pbrand:"",pquality:""}
            }
        },
        methods:{
            findAllCommodity(current){
                axios.get("/pageCommodity/"+this.current+"/"+this.pageSize)
                .then(res=>{
                    console.log(res.data);
                    res.data.records.forEach(re=>{
                        if (re.pstatus=="1"){
                            re.pstatus = "已上架";
                        }
                    })
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.current = res.data.current;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.findAllCommodity(this.current)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.current=val;
                this.findAllCommodity(this.current)
            },
            clear(){
                this.commodity={id:"",pnumber:"",pname:"",pimg:"",pprice:"",penterprise:"",paddtime:"",astatus:"",pstatus:"",companyId:"",plocal:"",pshelflife:"",pmaterial:"",pbrand:"",pquality:""}
                this.dialogFormVisible = true;
            },
            save(){
                let ep = JSON.parse(JSON.stringify(this.commodity));
                if(ep.id == ""){
                    console.log(ep);
                    axios.post("/commodity",ep)
                    .then(res=>{
                        if (res.data =="ok"){
                            this.findAllCommodity();
                            this.$message("添加成功");
                            this.dialogFormVisible = false;
                        }
                    })
                }else {
                    axios.put("/commodity",ep)
                    .then(res=>{
                        if (res.data=="ok"){
                            this.findAllCommodity();
                            this.$message("更新成功");
                            this.dialogFormVisible = false;
                        }
                    })
                }
                console.log(ep);
            },
            handleDelete(index,row){
                console.log(row.id);
                if (confirm("你确定删除此生产线信息吗？")){
                    axios.delete("/commodity/"+row.id)
                    .then(res=>{
                        if (res.data=="ok"){
                            this.$message("删除成功");
                            if (index==0){
                                this.current = this.current-1;
                            }
                            this.findAllCommodity();
                        }
                    })
                }

            },
            handleEdit(index, row) {
                this.commodity=JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
            },
            open(index,row) {
                this.commodity=JSON.parse(JSON.stringify(row));
                this.$alert(
                    '<p>商品名称：'+this.commodity.pname+'</p><br>'+
                    '<p>商品图片：'+this.commodity.pimg+'</p><br>'+
                    '<p>商品价格：'+this.commodity.pprice+'</p><br>'+
                    '<p>商品分类：'+this.commodity.penterprise+'</p><br>'+
                    '<p>添加时间：'+this.commodity.paddtime+'</p><br>'+
                    '<p>产地：'+this.commodity.plocal+'</p><br>'+
                    '<p>保质期：'+this.commodity.pshelflife+'</p><br>'+
                    '<p>材质：'+this.commodity.pmaterial+'</p><br>'+
                    '<p>品牌：'+this.commodity.pbrand+'</p><br>'+
                    '<p>商品质量：'+this.commodity.pquality+'</p><br>',
                    '查看商品属性', {
                    dangerouslyUseHTMLString: true
                });
            },
            search(){
                axios.get("/commodity?name="+this.searchName+"&&current="+this.current+"&&rows="+this.pageSize).then(res=>{
                    res.data.records.forEach(re=>{
                        if (re.pstatus=="1"){
                            re.pstatus = "已上架";
                        }
                    })
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.current = res.data.current;
                })
            }
        },
        mounted(){
            this.findAllCommodity(1);
        }
    })
</script>
</body>
</html>